<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>表格的增删改查</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .container {
            margin: 50px;
        }

        button{
            padding: 5px 15px;
            font-size: 13px;
            color: #fff;
            /* 字间距  rem 以页面html文字大小的倍数 */
            letter-spacing: .1rem;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #999;
        }

        table {
            margin-top: 30px;
            /* 合并单元格边框 */
            border-collapse: collapse;
        }

        th, td {
            padding: 10px 15px;
            text-align: center;
            border: 2px solid #f00;
        }

        .add {
            background-color: #00f;
            border-color: #00f;
        }

        .edit {
            background-color: #ff9000;
            border-color: #ff9000;
        }

        .remove {
            background-color: #f00900;
            border-color: #f00900;
        }

        .submit {
            background-color: #0f0;
            border-color: #0f0;
        }

        .cancel {
            background-color: #eee;
            border-color: #eee;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
        }

        .mask-content {
            margin: 50px;
            width: 300px;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
        }

        .mask-content div {
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <button class="add">添加用户</button>

        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th onclick="plan()">年龄 <span>O</span></th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>李白</td>
                    <td>44</td>
                    <td>男</td>
                    <td>
                        <button class="edit">修改</button>
                        <button class="remove">删除</button>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <div class="mask">
        <div class="mask-content" onclick="event.stopPropagation();">
            <div>
                姓名：<input type="text" class="uname">
            </div>
            <div>
                年龄：<input type="text" class="age">
            </div>
            <div>
                性别：
                男 &nbsp;<input type="radio" name="sex" checked class="sex">
                &emsp; 女 &nbsp;<input type="radio" name="sex">
            </div>
            <button class="submit">提交</button>
            <button class="cancel">取消</button>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        /*
            进入页面
                根据本地存储内容生成表格
            
            添加用户
                打开弹窗，填写信息，提交表单数据，添加到表格
            修改用户
                打开弹窗，获取当前行数据，填入遮罩表格中，修改信息，提交表单数据，更改表格对应行数据
            删除用户
                弹窗提示确认删除，确认后删除对应行数据
            根据年龄排序
                更改表格tr的顺序
        */

        // 获取本地存储的数据  userLs [{ name: xxx, age: xx, sex: xx }, ...]
        var userLs = localStorage.getItem("userLs"), // JSON字符串  null
            $tbody = $("tbody"),
            editIndex = -1; // 修改的下标，用于两个函数之间传值

        if(userLs){
            // 本地有数据，现改为数组，然后根据数组渲染页面
            userLs = JSON.parse(userLs);

            // render
            render();
        }else {
            // 本地没有数据，初始化为空
            userLs = [];
        }

        // 点击添加
        $(".add").click(function (){
            $(".mask").fadeIn(400);
            editIndex = -1;
        })

        // 关闭遮罩层
        $(".mask").click(fn);
        $(".cancel").click(fn);
        function fn(){
            $(".mask").fadeOut(400);
        }


        // 表单提交
        $(".submit").click(function (){
            var data = {
                name: $(".uname").val(),
                age: $(".age").val(),
                sex: $(".sex").prop("checked") ? "男" : "女"
            };
            // 判断是否是添加
            if(editIndex == -1){
                // 添加信息
                userLs.push(data)
            }else {
                // 找到对应编辑的下标，修改userLs中对应的数据
                // userLs.splice(editIndex, 1, data);
                userLs[editIndex] = data;
            }
            
            // 清空表单数据内容
            $(".uname").val("");
            $(".age").val("");
            $(".sex").prop("checked", true);

            // 关闭弹窗
            $(".mask").fadeOut(400);

            // 渲染页面
            render();

        })

        // 删除用户 -- 弹窗提示是否删除!!!
        $tbody.on("click", ".remove", function (){
            var sure = confirm("确定要删除吗？");
            if(sure){
                userLs.splice(this.dataset.index, 1);
                render();
            }
        })

        // 修改用户
        $tbody.on("click", ".edit", function (){
            $(".mask").fadeIn(400);
            // 给全局修改赋值
            editIndex = this.dataset.index;

            // 获取当前行数据，填入遮罩
            var obj = userLs[editIndex];
            $(".uname").val(obj.name);
            $(".age").val(obj.age);
            // if(obj.sex == "男")
            obj.sex == "男" ? $(".sex").prop("checked", true) : $(".sex").next().prop("checked",true);
            // $(".sex").prop("checked", obj.sex == "男");
        })

        // 排序 --> 对数据排序，渲染页面   sort
        function plan(){
            // event.target.small DOM上这个属性 默认是 undefined
            if(event.target.small){
                // 改为从大到小
                console.log("从大到小");
                userLs.sort(function (a,b){
                    // b-a 从大到小
                    return b.age - a.age;
                })
                render();
            }else {
                // 改为从小到大
                console.log("从小到大");
                // sort 排序接受函数，返回值 > 0 a在b后面  返回值小于0 a在b前面
                userLs.sort(function (a,b){
                    // a-b 从小到大
                    return a.age - b.age;
                })
                render();
            }
            event.target.small = !event.target.small;
        }

        // 根据数据渲染表格
        function render(){
            var str = "";
            for(var i = 0; i < userLs.length; i ++){
                str += `<tr>
                    <td>${i + 1}</td>
                    <td>${ userLs[i].name }</td>
                    <td>${ userLs[i].age }</td>
                    <td>${ userLs[i].sex }</td>
                    <td>
                        <button class="edit" data-index="${i}">修改</button>
                        <button class="remove" data-index="${i}">删除</button>
                    </td>
                </tr>`;
            }
            $tbody.html(str);
        }


        // 离开页面存储数据
        window.onbeforeunload = function (){
            localStorage.setItem("userLs", JSON.stringify(userLs));
        }
    </script>
</body>
</html>